<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import { installationPlan } from "@/api";
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus";

const option = ref({});
const getData = () => {
  installationPlan()
    .then((res) => {
      if (res.success) {
        setOption(res.data);
      } else {
        ElMessage({
          message: res.msg,
          type: "warning",
        });
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
const setOption = async (newData: any) => {
  option.value = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    legend: {
      data: ["签收工单数", "处理工单数"],
      itemWidth: 16,
      itemHeight: 8,
      textStyle: {
        color: "white",
        fontSize: 8,
      },
      // top: "0",
    },
    grid: {
      left: 40,
      right: 16,
      bottom: 36,
      top: 24,
    },
    xAxis: {
      data: newData.category,
      axisLine: {
        lineStyle: {
          color: "#7184a3",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
            // interval: 0,
            color: "#D7D7D7",
          },
    },
    yAxis: [
      {
        splitLine: { show: true },
        axisLine: {
          lineStyle: {
            color: "#7184a3",
          },
        },

        axisLabel: {
          formatter: "{value}",
        },
      },
    ],
    series: [
      {
        name: "签收工单数",
        type: "bar",
        barWidth: 10,
        itemStyle: {
          color: "#58b1ff",
        },
        label: {
          normal: {
            show: true,
            position: "top",
            color: "#d7d7d7",
            fontSize: "9",
            distance: 6,
          },
        },
        data: newData.barData,
      },
      {
        name: "处理工单数",
        type: "bar",
        barWidth: 10,
        itemStyle: {
          // borderRadius: 5,
          color: "#70e17b",
        },
        label: {
          normal: {
            show: true,
            position: "top",
            color: "#d7d7d7",
            fontSize: "9",
            distance: 6,
          },
        },
        // z: -12,
        data: newData.lineData,
      },
    ],
    dataZoom: [
      {
        show: newData.category.length > 5,
        type: "slider",
        xAxisIndex: 0,
        zoomLock: true,
        // width: 7,
        height: 7,
        bottom: 0,
        // right: 12,
        borderWidth: 0,
        borderColor: "transparent",
        backgroundColor: "rgba(4,42,102,0.7)",
        fillerColor: "white",
        borderRadius: 10,
        handleSize: 0,
        showDetail: false,
        start: 0,
        end: newData.category.length > 5 ? 50 : 100,
        brushSelect: false,
        filterMode: "filter",
        showDataShadow: false,
        realtime: true,
        // height: "72%",
        // top: "20%",
        textStyle: {
          color: "transparent",
        },
      },
    ],
  };
};
onMounted(() => {
  getData();
});
</script>

<template>
  <v-chart
    class="chart"
    :option="option"
    v-if="JSON.stringify(option) != '{}'"
  />
</template>

<style scoped lang="scss"></style>
